import { forwardRef } from "react"
import styled from "@emotion/styled"
import { PropsWithChildren } from "react"

const Input = styled.input`
    box-sizing: border-box;
    background-color: #383838;
    padding: 5rem 10rem;
    font-size: 16rem;
    font-family: monospace;
    color: #fff;
`

type BaseInputProps = ExtractStyledProps<typeof Input>

const BaseInput = forwardRef((props: BaseInputProps, ref) => {
    const { children, ...rest } = props
    return (
        <Input
            // @ts-ignore
            ref={ref}
            {...rest}
        >
            {children}
        </Input>
    )
})

export default BaseInput
